<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物品管理 - 智能仓储管理系统</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.1/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
    <style>
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f8f9fa;
        }
        .card {
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .card-header {
            background-color: #343a40;
            color: white;
            font-weight: bold;
        }
        .sidebar {
            height: 100vh;
            position: fixed;
            z-index: 1;
            top: 0;
            left: 0;
            background-color: #343a40;
            padding-top: 20px;
        }
        .sidebar a {
            padding: 15px 20px;
            text-decoration: none;
            font-size: 18px;
            color: #adb5bd;
            display: block;
            transition: 0.3s;
        }
        .sidebar a:hover {
            color: white;
            background-color: #495057;
        }
        .main-content {
            margin-left: 250px;
            padding: 20px;
        }
        .inventory-low {
            background-color: #ffc107;
            color: #212529;
        }
        .inventory-critical {
            background-color: #dc3545;
            color: white;
        }
        .inventory-ok {
            background-color: #28a745;
            color: white;
        }
        @media (max-width: 768px) {
            .sidebar {
                width: 100%;
                height: auto;
                position: relative;
            }
            .main-content {
                margin-left: 0;
            }
        }
    </style>
</head>
<body>
    <div class="sidebar col-md-2">
        <div class="text-center mb-5">
            <h2 class="text-white">智能仓储</h2>
        </div>
        <a href="/">首页</a>
        <a href="/items">物品管理</a>
        <a href="/locations">位置管理</a>
        <a href="/logs">出入库记录</a>
    </div>

    <div class="main-content">
        <div class="container-fluid">
            <h1 class="mb-4">物品管理</h1>
            
            <!-- 搜索和添加按钮 -->
            <div class="row mb-4">
                <div class="col-md-6">
                    <div class="input-group">
                        <input type="text" id="searchInput" class="form-control" placeholder="搜索物品名称或ID...">
                        <div class="input-group-append">
                            <button id="searchBtn" class="btn btn-primary">搜索</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 text-right">
                    <button id="addItemBtn" class="btn btn-success">添加物品</button>
                    <button id="exportBtn" class="btn btn-secondary ml-2">导出数据</button>
                </div>
            </div>

            <!-- 物品列表表格 -->
            <div class="card">
                <div class="card-header">物品列表</div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-striped">
                            <thead>
                                <tr>
                                    <th>ID</th>
                                    <th>RFID标签ID</th>
                                    <th>物品名称</th>
                                    <th>描述</th>
                                    <th>类别</th>
                                    <th>当前数量</th>
                                    <th>位置</th>
                                    <th>单价</th>
                                    <th>库存状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody id="itemsTableBody">
                                {% for item in items %}
                                <tr>
                                    <td>{{ item[0] }}</td>
                                    <td>{{ item[1] }}</td>
                                    <td>{{ item[2] }}</td>
                                    <td>{{ item[3] }}</td>
                                    <td>{{ item[4] }}</td>
                                    <td>{{ item[5] }}</td>
                                    <td>{{ item[6] }}</td>
                                    <td>{{ item[7] }}</td>
                                    <td>
                                        {% set quantity = item[5] %}
                                        {% if quantity <= 5 %}
                                        <span class="badge inventory-critical">库存危急</span>
                                        {% elif quantity <= 15 %}
                                        <span class="badge inventory-low">库存偏低</span>
                                        {% else %}
                                        <span class="badge inventory-ok">库存充足</span>
                                        {% endif %}
                                    </td>
                                    <td>
                                        <button class="btn btn-primary btn-sm edit-btn" data-id="{{ item[0] }}">编辑</button>
                                        <button class="btn btn-danger btn-sm delete-btn" data-id="{{ item[0] }}">删除</button>
                                    </td>
                                </tr>
                                {% else %}
                                <tr>
                                    <td colspan="10" class="text-center">暂无物品数据</td>
                                </tr>
                                {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

            <!-- 分页控件 -->
            {% if total_pages > 1 %}
            <div class="mt-4">
                <nav aria-label="Page navigation">
                    <ul class="pagination justify-content-center">
                        {% if current_page > 1 %}
                        <li class="page-item">
                            <a class="page-link" href="/items?page={{ current_page - 1 }}" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        {% endif %}
                        
                        {% for page_num in range(1, total_pages + 1) %}
                        <li class="page-item {{ 'active' if page_num == current_page else '' }}">
                            <a class="page-link" href="/items?page={{ page_num }}">{{ page_num }}</a>
                        </li>
                        {% endfor %}
                        
                        {% if current_page < total_pages %}
                        <li class="page-item">
                            <a class="page-link" href="/items?page={{ current_page + 1 }}" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                        {% endif %}
                    </ul>
                </nav>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- 添加/编辑物品模态框 -->
    <div class="modal fade" id="itemModal" tabindex="-1" role="dialog" aria-labelledby="itemModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="itemModalLabel">添加新物品</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="itemForm">
                        <input type="hidden" id="item_id">
                        <div class="form-group">
                            <label for="tag_id">RFID标签ID *</label>
                            <input type="text" class="form-control" id="tag_id" required>
                        </div>
                        <div class="form-group">
                            <label for="name">物品名称 *</label>
                            <input type="text" class="form-control" id="name" required>
                        </div>
                        <div class="form-group">
                            <label for="description">物品描述</label>
                            <textarea class="form-control" id="description"></textarea>
                        </div>
                        <div class="form-group">
                            <label for="category">类别</label>
                            <input type="text" class="form-control" id="category">
                        </div>
                        <div class="form-group">
                            <label for="quantity">数量 *</label>
                            <input type="number" class="form-control" id="quantity" min="1" value="1" required>
                        </div>
                        <div class="form-group">
                            <label for="location">位置 *</label>
                            <select class="form-control" id="location" required>
                                <option value="货架A1">货架A1</option>
                                <option value="货架A2">货架A2</option>
                                <option value="货架B1">货架B1</option>
                                <option value="货架B2">货架B2</option>
                            </select>
                        </div>
                        <div class="form-group">
                            <label for="unit_price">单价</label>
                            <input type="number" step="0.01" class="form-control" id="unit_price" min="0" value="0">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="submitItemForm">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除确认模态框 -->
    <div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteModalLabel">确认删除</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    确定要删除这个物品吗？此操作不可撤销。
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirmDelete">删除</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        $(document).ready(function() {
            let currentItemId = null;
            
            // 添加物品按钮点击事件
            $('#addItemBtn').click(function() {
                $('#itemModalLabel').text('添加新物品');
                $('#item_id').val('');
                $('#itemForm')[0].reset();
                $('#itemModal').modal('show');
            });

            // 编辑按钮点击事件
            $('.edit-btn').click(function() {
                currentItemId = $(this).data('id');
                $('#itemModalLabel').text('编辑物品');
                
                // 查找当前行的数据
                const row = $(this).closest('tr');
                const tagId = row.find('td:nth-child(2)').text();
                const name = row.find('td:nth-child(3)').text();
                const description = row.find('td:nth-child(4)').text();
                const category = row.find('td:nth-child(5)').text();
                const quantity = row.find('td:nth-child(6)').text();
                const location = row.find('td:nth-child(7)').text();
                const unitPrice = row.find('td:nth-child(8)').text();
                
                // 填充表单
                $('#item_id').val(currentItemId);
                $('#tag_id').val(tagId);
                $('#name').val(name);
                $('#description').val(description);
                $('#category').val(category);
                $('#quantity').val(quantity);
                $('#location').val(location);
                $('#unit_price').val(unitPrice);
                
                $('#itemModal').modal('show');
            });

            // 删除按钮点击事件
            $('.delete-btn').click(function() {
                currentItemId = $(this).data('id');
                $('#deleteModal').modal('show');
            });

            // 确认删除
            $('#confirmDelete').click(function() {
                $.ajax({
                    url: '/api/delete_item/' + currentItemId,
                    type: 'DELETE',
                    success: function(response) {
                        if (response.success) {
                            alert('物品删除成功！');
                            $('#deleteModal').modal('hide');
                            location.reload();
                        } else {
                            alert('删除失败：' + response.message);
                        }
                    },
                    error: function() {
                        alert('请求失败，请重试。');
                    }
                });
            });

            // 提交物品表单
            $('#submitItemForm').click(function() {
                const formData = {
                    id: $('#item_id').val(),
                    tag_id: $('#tag_id').val(),
                    name: $('#name').val(),
                    description: $('#description').val(),
                    category: $('#category').val(),
                    quantity: parseInt($('#quantity').val()),
                    location: $('#location').val(),
                    unit_price: parseFloat($('#unit_price').val())
                };

                const isEdit = formData.id !== '';
                const url = isEdit ? '/api/update_item' : '/api/add_item';

                $.ajax({
                    url: url,
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(formData),
                    success: function(response) {
                        if (response.success) {
                            alert(isEdit ? '物品更新成功！' : '物品添加成功！');
                            $('#itemModal').modal('hide');
                            location.reload();
                        } else {
                            alert((isEdit ? '更新' : '添加') + '失败：' + response.message);
                        }
                    },
                    error: function() {
                        alert('请求失败，请重试。');
                    }
                });
            });

            // 搜索功能
            $('#searchBtn').click(function() {
                const searchTerm = $('#searchInput').val().trim();
                if (searchTerm) {
                    window.location.href = '/items?search=' + encodeURIComponent(searchTerm);
                }
            });

            // 回车键触发搜索
            $('#searchInput').keypress(function(e) {
                if (e.which === 13) {
                    $('#searchBtn').click();
                }
            });

            // 导出数据
            $('#exportBtn').click(function() {
                window.location.href = '/api/export_items';
            });

            // 添加表格行悬停效果
            $('#itemsTableBody tr').hover(function() {
                $(this).addClass('bg-light');
            }, function() {
                $(this).removeClass('bg-light');
            });
        });
    </script>
</body>
</html>